<template>
    <div>
        <div class="box">
            <div class="title">{{$t('merchantransorder')}} | {{$t('detls')}}</div>
            <el-button type="primary" icon="el-icon-d-arrow-left" :circle="true" @click="goAway" v-preventReClick></el-button>
            <div class="txtx">{{$t('orderinfo')}}</div>
            <div class="detBox">
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('mertnam')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{result.payeeName}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('trastamt')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{result.totalAmount}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('transstatus')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{result.txStatus}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('product')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{result.product}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('trancrttim')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{result.gmtCreate}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('trscoptim')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{result.gmtModified}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('acttranamount')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{result.txAmount}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('businesstype')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{result.businessType}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('payeid')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{result.payeeId}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('payrid')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{result.userId}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('nameofpayee')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{result.payeeName}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('nameofpayer')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{result.payerName}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('payordno')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody dadada">{{result.payOrderNo}}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="txtx">{{$t('theorddets')}}</div>
            <div class="detBox" v-for="(item, i) in childOrd" :key="i">
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('chnnumber')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.channelId}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('tranorderno')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.payOrderNo}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('trastamt')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.txAmount}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('servchrg')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.fee}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('chntrstyp')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.channelTradeType}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('chntrasernum')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.channelSerialId}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('extchnsernum')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.outSerialNo}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('reqchntransernum')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.channelSerialNo}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('extchnreturndesc')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.outRespDesc}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('bankcardnum')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.payTypeDesc}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('bankname')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.bankShortName}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('bankcdtp')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.cardType}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('paymentmthd')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.payType}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('trscoptim')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.outTxEndTime}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('chntranstime')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.outTxEndTime}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('liquid')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.sendFlag}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('extchnreturncode')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody">{{item.outRespCode}}</div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('transstatus')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody blblbl">{{item.txStatus}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <div class="bhead">{{$t('systrknum')}}</div>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div class="grid-content bg-purple-light">
                            <div class="bbody dadada">{{item.globalSeq}}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import {
    merorderdet
} from '@/libs/reqlist.js'
export default {
    data() {
        return {
            // 查询结果
            result: {},
            // 查询参数
            selectParam: {
                payOrderNo: null
            },
            childOrd: []
        }
    },
    methods: {
        getDeatail() {
            merorderdet(JSON.stringify(this.selectParam)).then(res => {
                if (res.data.code === '000000') {
                    this.result = res.data.data
                    if (this.result.txStatus === 'FROZEN') this.result.txStatus = this.$t('frze')
                    if (this.result.txStatus === 'SUCCESS') this.result.txStatus = this.$t('succ')
                    if (this.result.txStatus === 'ACCEPTED') this.result.txStatus = this.$t('entertained')
                    if (this.result.txStatus === 'FAIL') this.result.txStatus = this.$t('bindfailure')
                    if (this.result.txStatus === 'CLOSED') this.result.txStatus = this.$t('orderclosed')
                    if (this.result.txStatus === 'PROCESSING') this.result.txStatus = this.$t('inprogress')
                    if (this.result.errMsg === 'success') this.result.errMsg = this.$t('succ')
                    if (this.result.tradeType === '充值') this.result.tradeType = this.$t('recharge')
                    if (this.result.tradeType === '消费') this.result.tradeType = this.$t('consumption')
                    if (this.result.tradeType === '退款') this.result.tradeType = this.$t('refund')
                    if (this.result.tradeType === '提现') this.result.tradeType = this.$t('cashwiaw')
                    if (this.result.payType === '快捷支付') this.result.payType = this.$t('fastpayment')
                    if (this.result.product === '收款码支付（用户主扫）') this.result.product = this.$t('paybycollcode')
                    if (this.result.product === '付款码支付（商户主扫）') this.result.product = this.$t('paycodement')
                }
            })
        },
        goAway () {
            this.$router.go(-1)
        },
        dispose () {
            this.childOrd = JSON.parse(window.sessionStorage.getItem('childOrd'))
            for (let i = 0; i < this.childOrd.length; i++) {
                let item = this.childOrd[i]
                if (item.channelTradeType === 'RECHARGE') item.channelTradeType = this.$t('recharge')
                if (item.channelTradeType === 'CONSUME') item.channelTradeType = this.$t('consumption')
                if (item.channelTradeType === 'WITHDRAW') item.channelTradeType = this.$t('cashwiaw')
                if (item.channelTradeType === 'REFUND') item.channelTradeType = this.$t('refund')
                if (item.channelTradeType === 'TRANSFER') item.channelTradeType = this.$t('tranacc')
                if (item.channelTradeType === 'REPAYMENT') item.channelTradeType = this.$t('repayment')
                if (item.outRespDesc === 'Approved') item.outRespDesc = this.$t('approved')
                if (item.outRespDesc === 'Successful') item.outRespDesc = this.$t('succ')
                if (item.outRespDesc === '[Test] Approved') item.outRespDesc = this.$t('testapproved')
                if (item.txStatus === 'SUCCESS') item.txStatus = this.$t('succ')
                if (item.txStatus === 'ACCEPTED') item.txStatus = this.$t('entertained')
                if (item.txStatus === 'FAIL') item.txStatus = this.$t('bindfailure')
                if (item.txStatus === 'CLOSED') item.txStatus = this.$t('orderclosed')
                if (item.txStatus === 'PROCESSING') item.txStatus = this.$t('inprogress')
                if (item.cardType === 'visa DEBIT') item.cardType = this.$t('debitcard')
                if (item.cardType === 'visa CREDIT') item.cardType = this.$t('creditcard')
                if (item.payType === 'WHP') item.payType = this.$t('withhold')
                if (item.payType === 'BQP') item.payType = this.$t('shortcut')
                if (item.payType === 'AGTP') item.payType = this.$t('undertakesto')
                if (item.payType === 'GWP') item.payType = this.$t('gateway')
                if (item.payType === 'SIGN') item.payType = this.$t('tiedcard')
            }
        }
    },
    mounted() {
        this.selectParam.payOrderNo = window.sessionStorage.getItem('payOrderNo')
        this.dispose()
        this.getDeatail()
    },
    destroyed () {
        window.sessionStorage.removeItem('payOrderNo')
    }
}
</script>

<style lang="less" scoped>
.box {
    position: relative;
    width: 800px;
    margin: 0 auto;
    .title {
        display: inline-block;
        margin-top: 20px;
        font-size: 18px;
        font-weight: 700;
    }
    .txtx {
        font-size: 16px;
        margin-top: 45px;
        font-weight: 700;
    }
    .el-row {
        border-bottom: 1px solid #ccc;
    }
    .el-row:last-child {
        border-bottom: none;
    }
    .detBox {
        margin-top: 5px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        .bhead {
            background: #E4E4E4;
            width: 132px;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
            border-right: 1px solid #ccc;
        }
        .bbody {
            background: #fff;
            width: 264px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-right: 1px solid #ccc;
        }
        .dadada {
            width: 665px;
        }
        .blblbl {
            width: 267px;
        }
    }
    .el-button {
        position: absolute;
        top: 20px;
        right: 0;
    }
}
</style>
